<template>
  <div class="c-bg-sgray c-p">
    <div class="c-p c-bg-sgray" id="tabhBar" :class="[tabhBarFixed == true ? isiOS ? 'tab-bar-ios c-pb16' : ($isWxApp() ? 'tabhBar c-wx-top0 c-pb16' : 'tabhBar c-pb16')  : 'tabhBar c-pb16', unenableTopNav ? 'c-wx-top0' : '']">
      <div class="c-bg-white c-pb16">
        <div id="typeList" class="c-ml30 c-mr40 c-contexty-hidden c-contextX-scroll c-ws-n c-pt16">
          <div @click="changeType(index)" v-for="(item, index) in prodTypeList" :key="index" v-show="item.isShow" class="c-inlineblack c-mr54 c-w-fit">
            <div :id="'tab_' + item.prodType" class="c-flex-column c-aligni-stretch c-w-fit">
              <span :class="chooseIndex == index ? 'c-fs28 c-fw-b' : 'c-fs24'" class="c-fc-sblack">{{prodTypeMap[item.prodType]}}</span>
              <span :class="chooseIndex == index ? 'theme-bg-gradient' : ''" class="c-zindex1 c-hh8 c-ww48 c-br4 c-center c-mt-8"></span>
            </div>
          </div>
        </div>
        <span class="iconfont c-fs16 c-fc-sgray c-rotate180 c-inlineblack c-pa c-p-r0 c-p-t0 iconModeo" @click="showProdType">&#xe67a;</span>
      </div>
      <div class="c-flex-row c-justify-end c-ph24 c-mt20" v-show="!showSearchBar">
        <div @click="showSearch" class="iconfont c-fc-gray c-mr30 c-fs20">&#xe6d6;</div>
        <div @click="showCloum" class="iconfont c-fc-gray c-fs20">&#xe85c;</div>
      </div>
      <new-search-bar v-show="showSearchBar" ref="newSearchBar" :searchText="searchText" @search='startSearch' @cancel='cancleSearch'></new-search-bar>
    </div>
    <div v-if="isCloum">
      <div class="c-flex-column c-justify-sb c-flexw-wrap c-ph24"  :class="showSearchBar?'c-mt160':'c-mt120'">
        <div v-for="(item, index) in prodList" :key="index" @click="goDetail(item)" class="c-bg-white c-pv24 c-ph24 c-flex-column c-mt32  c-br16 c-text-hidden">
          <div v-if="item.prodType==51||item.prodType==180" class="c-flex-row">
            <div class="c-ww180 c-hh120 c-text-hidden c-p c-br16">
              <img class="c-w100 c-hh120 c-br16" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
              <div class="c-fs18 c-fc-white c-pa c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="vipType==2?'vipIcon':vipType==4?'vipIcon':'serverIcon'">{{ vipType==2?'VIP免费':vipType==4?'SVIP免费':'免费专享' }}</div>
            </div>
            <div class="c-ph12 c-flex-column c-justify-sb">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-textAlign-l c-w100 c-fw600 c-ww320">{{item.name}}</div>
              <div class="c-fs18 c-ww332 c-pl12 c-br20 c-flex-row c-aligni-center c-justify-sb" :class="item.prodType==51?statusClassName[item.liveStatus]:''">
                <div>{{item.prodType==51?item.startAt:''}}</div>
                <div class="c-fs18 c-pl10 c-pr10 c-fc-white c-br20 c-pv4 c-flex-row c-aligni-center c-justify-center" :class="statusIconName[item.liveStatus]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.liveStatus==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  <div class="iconfont c-fs20 c-fc-white c-mr6" v-else-if="item.liveStatus==0||item.liveStatus==2">
                    {{item.liveStatus==0?'&#xe86b;':'&#xe86c;'}}
                  </div><span class="c-fw600">{{statusMap[item.liveStatus]}}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="c-flex-row">
            <div class="c-ww180 c-hh120 c-text-hidden c-p">
              <img class="c-w100 c-hh120 c-br16" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
              <div class="c-fs18 c-fc-white c-pa c-br-tl16 c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="vipType==2?'vipIcon':vipType==4?'vipIcon':'serverIcon'">{{ vipType==2?'VIP免费':vipType==4?'SVIP免费':'免费专享' }}</div>
              <div v-if="item.isUpdating&&enableColumnRelates" class="c-fs18 c-pa c-p-r6 c-p-b4 c-pl10 c-pr10 c-fc-white c-br8 c-pv4 c-flex-row c-aligni-center c-justify-center iconName-4">
                更新中
              </div>
            </div>
            <div class="c-ph12 c-flex-column c-justify-sb">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-textAlign-l c-w100 c-fw600 c-ww320">{{item.name}}</div>
              <div v-if="item.prodType==142&&item.author" class="c-fs18 c-ph12 c-pv4 c-mb6 c-br8 c-text-ellipsis1">{{ item.author }}</div>
              <div v-if="(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))">
                <div v-if="item.prodType==5" class="c-fs18 c-ph12 c-pv4 c-br8">
                  {{item.plays}}{{ item.childType==0||item.childType==2?'人看过':'人听过' }}
                </div>
                <div v-else-if="item.prodType==9||item.prodType==61" class="c-fs18 c-ph12 c-pv4 c-mt20 c-br8">{{ item.sales }}人购买</div>
                <div v-else-if="item.prodType == ckFrom.camp" class="c-fs18 c-pv4 c-br8">{{ item.people || 0 }}人报名</div>
                <div v-else class="c-fs18 c-ph12 c-pv4 c-mt20 c-br8">{{ item.viewNum }}次阅读</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="c-flex-row c-justify-sb c-flexw-wrap c-ph20" :class="showSearchBar?'c-mt160':'c-mt120'">
        <div v-for="(item, index) in prodList" :key="index" @click="goDetail(item)" class="c-bg-white c-pb22 c-flex-column c-ww290 c-mt32  c-br16 c-text-hidden">
          <div v-if="item.prodType==51||item.prodType==180">
            <div class="c-ww290 c-hh192 c-text-hidden c-p c-br16">
              <img class="c-w100 c-hh192" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
              <div class="c-fs18 c-fc-white c-pa c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="vipType==2?'vipIcon':vipType==4?'vipIcon':'serverIcon'">{{ vipType==2?'VIP免费':vipType==4?'SVIP免费':'免费专享' }}</div>
              <div class="c-fs18 c-pa c-p-r6 c-p-b4 c-pl10 c-pr10 c-fc-white c-br8 c-pv4 c-flex-row c-aligni-center c-justify-center" :class="statusIconName[item.liveStatus]">
                <div class="c-flex-row c-aligni-end c-mr6" v-if="item.liveStatus==1">
                  <span class="pillar"></span>
                  <span class="pillar"></span>
                  <span class="pillar"></span>
                </div>
                <div class="iconfont c-fs20 c-fc-white c-mr6" v-else-if="item.liveStatus==0||item.liveStatus==2">
                  {{item.liveStatus==0?'&#xe86b;':'&#xe86c;'}}
                </div><span class="c-fw600">{{statusMap[item.liveStatus]}}</span>
              </div>
            </div>
            <div class="c-ph12">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-textAlign-l c-ww270 c-mt12 c-fw600">{{item.name}}</div>
              <div v-if="item.prodType==51" class="c-fs18 c-ph12 c-pv4 c-mt20 c-br8" :class="statusClassName[item.liveStatus]">{{item.startAt}}</div>
            </div>
          </div>
          <div v-else>
            <div class="c-ww290 c-hh192 c-text-hidden c-p">
              <img class="c-w100 c-hh192" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
              <div class="c-fs18 c-fc-white c-pa c-br-tl16 c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="vipType==2?'vipIcon':vipType==4?'vipIcon':'serverIcon'">{{ vipType==2?'VIP免费':vipType==4?'SVIP免费':'免费专享' }}</div>
              <div v-if="item.isUpdating&&enableColumnRelates" class="c-fs18 c-pa c-p-r6 c-p-b4 c-pl10 c-pr10 c-fc-white c-br8 c-pv4 c-flex-row c-aligni-center c-justify-center iconName-4">
                更新中
              </div>
            </div>
            <div class="c-ph12">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-textAlign-l c-w100 c-mt12 c-fw600" :class="(item.prodType==142&&item.author)||(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))?'c-mb20':''">{{item.name}}</div>
              <div v-if="item.prodType==142&&item.author" class="c-fs18 c-ph12 c-pv4 c-mb6 c-br8 c-text-ellipsis1">{{ item.author }}</div>
              <div v-if="(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))">
                <div v-if="item.prodType==5" class="c-fs18 c-ph12 c-pv4 c-br8">
                  {{item.plays}}{{ item.childType==0||item.childType==2?'人看过':'人听过' }}
                </div>
                <div v-else-if="item.prodType==9||item.prodType==61" class="c-fs18 c-ph12 c-pv4 c-br8">{{ item.sales }}人购买</div>
                <div v-else-if="item.prodType == ckFrom.camp" class="c-fs18 c-pv4 c-br8">{{ item.people || 0 }}人报名</div>
                <div v-else class="c-fs18 c-ph12 c-pv4 c-mt20 c-br8">{{ item.viewNum }}次阅读</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (prodList && prodList.length > 0)" :noData="!prodList || prodList.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
    <div v-if="isShowProdType" class="c-bg-white c-pt40 c-pb12 c-ph24 c-flex-row c-flexw-wrap c-w100 c-pa c-p-t0 c-p-l0 c-br-bl20 c-br-br20 c-pz10" :class="[tabhBarFixed == true ? isiOS ? 'tab-bar-ios c-pb16' : ($isWxApp() ? 'tabhBar c-pb16' : 'tabhBar c-pb16')  : '', unenableTopNav ? 'c-wx-top0' : '']">
      <div @click="changeType(index)" v-for="(item, index) in prodTypeList" :key="index" v-show="item.isShow" :class="[chooseIndex == index ? 'c-fw600 theme-fc theme-bg-10 theme-bd1' : 'c-fw400 c-fc-xblack c-bg-f2', (index + 1) % 4 == 0 ? '' : 'c-mr20']" class="c-fs24 c-ww132 c-hh54 c-br30 c-flex-row c-flex-center c-mb30">{{prodTypeMap[item.prodType]}}</div>
    </div>
    <div v-if="showSearchType||isShowProdType" @click="showSearchType = false;isShowProdType = false" class="c-pf c-p-t0 c-pz6 c-maxw640 c-w100 c-h c-flex-column c-flex-center c-translucent-balck50">
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "VipBuy",
  components: {
    newSearchBar,
    loadingStatusTem
  },
  beforeCreate() { },
  data() {
    return {
      prodType: 110,
      prodList: [],
      prodTypeList: [],
      page: 1,
      is_page: false,
      limit: 10,
      isLoading: false,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
      prodTypeMap: global.prodMapType,
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "回放已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      statusIconName:{
        0: 'iconName-0',
        1: 'iconName-1',
        2: 'iconName-2',
        3: 'iconName-3',
        4: 'iconName-4',
      },
      chooseIndex: 0,
      vipType: 2,
      isShowProdType:false,
      showSearchBar:false,
      showSearchType:false,
      isCloum:false,
      searchText:'',
      tabhBarFixed:true,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      ckFrom: global.ckFrom
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
    // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
  },
  methods: {
    //typeBar样式置顶
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 退出时会报错
      if (!document.querySelector('#tabhBar')) {
        return;
      }
      var offsetTop = document.querySelector('#tabhBar').offsetTop != null ? document.querySelector('#tabhBar').offsetTop : 68;
      if (scrollTop >= offsetTop && offsetTop >= 0) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
    },
    cancleSearch(e) {
      this.page = 1;
      this.prodList = [];
      this.searchText = e.searchValue;
      this.showSearchBar = false;
      this.showSearchType = false;
      this.searchText = ''
      this.getFreeProds();
    },
    //通过名称模糊搜索
    startSearch(e) {
      this.page = 1;
      this.prodList = [];
      this.searchText = e.searchValue;
      this.getFreeProds();
    },
    showCloum() {
      this.isCloum = !this.isCloum
    },
    showSearch() {
      this.showSearchBar = true;
      this.showSearchType = false;
      this.$nextTick(() => {
        this.$refs.newSearchBar.searchClick();
      })
    },
    showProdType() {
      this.isShowProdType = true
    },
    goDetail: function(item) {
      goDetails(this, item.prodType, item.prodId, '', item.childType || 0)
    },
    changeType: function (cIndex) {
      if (this.isLoading) {
        return;
      }
      this.chooseIndex = cIndex;
      this.prodType = this.prodTypeList[cIndex].prodType;
      this.page = 1;
      this.is_page = false;
      this.searchText = ''
      this.prodList = [];
      const tabDom = document.getElementById('tab_' + this.prodTypeList[cIndex].prodType)
      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (document.getElementById("typeList") && tabDom) {
        document.getElementById("typeList").scrollLeft = tabDom.offsetLeft - (clientWidth / 2) + 30
      }
      this.getFreeProds();
    },
    getProdTypes: function() {
      utilJs.getMethod(`${global.apiurl}Marketing/vip/getProdExist?vipType=${this.vipType}`, (res) => {
        this.prodTypeList = res;
        for (let i = 0; i < this.prodTypeList.length; i++) {
          if (this.prodTypeList[i].isShow) {
            this.chooseIndex = i;
            this.prodType = this.prodTypeList[i].prodType;
            break;
          }
        }
        this.$nextTick(() => {
          window.addEventListener('scroll', this.handleScroll);
        })
        this.getFreeProds();
      });
    },
    getFreeProds: function() {
      if (this.isLoading) {
        return
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}Marketing/vip/getProdList?prodType=${this.prodType}&limit=${this.limit}&page=${this.page}&vipType=${this.vipType}&prodName=${this.searchText}`, (res) => {
        if (res.prodList.data) {
          if (this.page == 1) {
            this.prodList = res.prodList.data ? res.prodList.data : [];
          } else {
            this.prodList = this.prodList.concat(res.prodList.data);
          };
        }
        this.page = res.prodList.data && (res.prodList.data.length >= this.limit) ? (this.page + 1) : this.page;
        this.is_page = res.prodList.data && (res.prodList.data.length >= this.limit) ? true : false;
        this.isLoading = false;
      }, () => {
        this.isLoading = false;
      });
    },
    //下拉加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getFreeProds();
        }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?typeNum=" +
        this.vipType +
        "&refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "升级会员", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?typeNum=" +
        this.vipType +
        "&refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("升级会员", "", shareUrl, "");
    },
  },
  activated() {
    this.prodType = 110;
    this.prodList = [];
    this.prodTypeList = [];
    this.page = 1;
    this.searchText = ''
    this.is_page = false;
    this.isLoading = false;
    this.chooseIndex = 0;
    this.vipType = this.$route.query.typeNum ? Number(this.$route.query.typeNum) : 2;
    this.getProdTypes();
    if (this.vipType == 2) {
      setDocumentTitle("VIP会员免费"); // eslint-disable-line
    } else {
      setDocumentTitle("SVIP会员免费"); // eslint-disable-line
    }
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.timeColor {
  color: #89593f;
}
.priceColor {
  color: #daac6a;
}
.vipChooseBG {
  background: #fdf8ee;
  border: 2px solid #e3b36e;
  box-shadow: 0px 10px 10px 0px rgba(226,176,121,0.20);
}
.vipNoChooseBG {
  border: 2px solid #e8e8e8;
}
.vip-activite-bg {
  background: url("../../../../public/i/wap/vip/vip-active-tag.png");
  background-size: cover;
}
.c-bg-top {
  background: linear-gradient(
    90deg,
    rgba(62, 64, 77, 1) 0%,
    rgba(60, 63, 74, 1) 100%
  );
  background-size: 100% 100%;
}
.c-bg-vipBg {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/vip/vipBg.png");
  background-size: cover;
}
.c-bg-vip_tag {
  background: url("../../../../public/i/wap/vip/vip-tag.png");
  background-size: cover;
}
.c-ww286 {
  width: 7.15rem;
}
.buyBtnBG {
  background: linear-gradient(
    -90deg,
    rgba(222, 186, 131, 1),
    rgba(247, 223, 176, 1)
  );
}
.c-bg-vip {
  background: url("../../../assets/i/wap/vip/vip.png") no-repeat left top;
  background-size: 100% 100%;
}
.family-card-bg {
  background: url("../../../assets/i/wap/vip/familyCard.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-vip-bg {
  background: url("../../../assets/i/wap/recommend/VIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-svip-bg {
  background: url("../../../assets/i/wap/recommend/SVIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.dia-head-bg {
  padding-top: 5rem;
}
.dialog-mid {
  background: url("../../../assets/i/wap/recommend/recommend-present-mid.png")
    no-repeat;
  background-size: 100% 100%;
  padding-right: 0.4rem;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-left1 {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.translate-lr {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.knowBtn {
  background: linear-gradient(
    -90deg,
    rgba(72, 147, 248, 1),
    rgba(72, 147, 248, 0.7)
  );
}
.goodsDetail >>> img {
  width: 100%;
}
.goodsDetail >>> p {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.goodsDetail >>> span {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.box-shadow {
  box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.5);
}
.hh230 {
  height: 5.75rem;
}
.vip-top-bg {
  background: url("../../../../public/i/wap/vip/vip-top-bg.png");
  background-size: cover;
}
.w516 {
  width: 51.6%;
}
.vip-bar-bg {
  background: url("../../../../public/i/wap/vip/vip-bar-bg.png");
  background-size: cover;
}
.svip-bar-bg {
  background: url("../../../../public/i/wap/vip/svip-bar-bg.png");
  background-size: cover;
}
.fc-vip {
  color: #6a460f;
}
.probation-btn {
  color: #6a460f;
  background: linear-gradient(-90deg,#f2be6d 0%, #f3e2ac 100%);
}
.buy-btn {
  color: #eadbac;
  background: linear-gradient(#252531 0%, #4e4e5c 0%, #23232f 100%);
}
.bg-get-way {
  background: linear-gradient(-30deg,#f2be6d 0%, #f3e2ac 100%);
}
.ww184 {
  width: 4.6rem;
}
.hh122 {
  height: 3.05rem;
}
.c-mt-8{
  margin-top: -0.2rem;
}
.iconModeo{
  right: 0.2rem;
  top: 0.8rem;
}
.vipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.svipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.serverIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.status-0 {
  color: #F64163;
  background: rgba(246, 65, 99, .1);
}
.status-1 {
  color: #03BA50;
  background: rgba(3, 186, 80, .1);
}
.status-2 {
  color: #FF880E;
  background: rgba(255, 136, 14, .1);
}
.iconName-0 {
  background: #F64163;
}
.iconName-1 {
  background: #03BA50;
}
.iconName-2 {
  background: #FF880E;
}
.iconName-3,.iconName-4 {
  background: rgba(204, 204, 204, 0.5)
}
.status-3, .status-4{
  color: #999;
  background: rgba(153, 153, 153, .1);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.free-end-txt{
  background: rgba(255,48,12,0.10);
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  /* background-color: #fff; */
  z-index: 900;
}
.tab-bar-ios {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9999;
}
</style>
